<template>
	<!-- <div class="main-page" v-if="isBusInfo"> -->
	<div class="main-page">
		<div class="head">
			<div>
				<div>{{businessInfo.storeName}}</div>
				<div class="content">在花一</div>
			</div>
			<img class="head-img" src="/static/dianpu.png" />
		</div>
		<div class="price-count">
			<div class="price-info">
				<div class="title">金额</div>
				<div class="price">{{price}}</div>
				<div class="line"></div>
				<div class="danwei">元</div>
			</div>
			<div class="beizu" @click="openDialogInput">
				{{beizhu?beizhu:"添加备注"}}
			</div>
			<div class="my-card" @click="vipChange">
				<div class="left">
					<div class="title"><span
							style="margin-right: 10px;">加￥{{memberPrice}}</span>{{ !isVip ? "参与“霸王补贴”" : "" }}最高补贴100%
					</div>
					<div class="content" v-if="!isVip">
						<div v-if="businessInfo.join_platform_guarantee_plan == 1">不限合作商家</div>
						<div v-else>仅本店使用</div>
					</div>
					<div class="content1" v-if="vipRadio && !isVip" @click.stop="goAgeement">同意<span>《再花卡服务协议》</span>
					</div>
				</div>
				<img src="/static/check-no.png" class="radio-pic" v-if="!vipRadio" />
				<img src="/static/check.png" class="radio-pic" v-if="vipRadio" />
			</div>
			<div class="my-card" @click="shopChange">
				<div class="left">
					<div class="title">本单<image class="img" src="/static/hongbao.png"></image>代付</div>
					<div class="content2">
						<span v-if="isVip&&userInfo">再花卡余额￥{{userInfo.userCashCouponUsable/100}}</span>
						<span v-if="!isVip&&vipRadio">再花卡余额￥{{price}}</span>
					</div>
				</div>
				<div class="price-center">￥{{shopPrice}}</div>
				<img src="/static/check-no.png" class="radio-pic" v-if="!shopRadio" />
				<img src="/static/check.png" class="radio-pic" v-if="shopRadio" />
			</div>

			<div class="my-card" @click="shopChange">
				<div class="left">
					<div class="title">本单<image class="img" src="/static/hongbao.png"></image>加速补贴</div>
					<div class="content2">
						<span v-if="isVip&&userInfo">再花卡余额￥{{userInfo.userCashCouponUsable/100}}</span>
						<span v-if="!isVip&&vipRadio">再花卡余额￥{{price}}</span>
					</div>
				</div>
				<div class="price-center">￥{{shopPrice}}</div>
				<img src="/static/check-no.png" class="radio-pic" v-if="!shopRadio" />
				<img src="/static/check.png" class="radio-pic" v-if="shopRadio" />
			</div>

			<div class="my-card" @click="shareChange" v-if="userInfo.userCashCouponHelperUseable">
				<div class="left">
					<div class="title">帮花·本单代付</div>
				</div>
				<div class="price-center">￥{{sharePrice}}</div>
				<img src="/static/check-no.png" class="radio-pic" v-if="!shareRadio" />
				<img src="/static/check.png" class="radio-pic" v-if="shareRadio" />
			</div>
		</div>

		<div class="zan-wei"></div>

		<div class="btn-kw">
			<div :class="toPrice?'tips':'tipsHide'">
				<span class="tip" v-if="memberPrice && vipRadio&&!isVip">（含卡费￥{{ memberPrice }}）</span>
				实付金额 <span class="price">{{toPrice}}</span> 元
			</div>
			<div class="kw-row">
				<div @click="kwbykey(1)">1</div>
				<div @click="kwbykey(2)">2</div>
				<div @click="kwbykey(3)">3</div>
				<div @click="kwbykey('del')">
					<image src="/static/del.png" class="img-del"></image>
				</div>
			</div>
			<div class="kw-xia">
				<div class="kw-left">
					<div class="kw-row">
						<div @click="kwbykey(4)">4</div>
						<div @click="kwbykey(5)">5</div>
						<div @click="kwbykey(6)">6</div>
					</div>
					<div class="kw-row">
						<div @click="kwbykey(7)">7</div>
						<div @click="kwbykey(8)">8</div>
						<div @click="kwbykey(9)">9</div>
					</div>
					<div class="kw-row">
						<div @click="kwbykey(0)" class="btn-0" style="width: 50%">0</div>
						<div @click="kwbykey('.')">.</div>
					</div>
				</div>
				<div class="c-bg" @click="zhifu" :style="parseFloat(price) ? '' : 'background:rgba(67,144,87,0.4)'">
					付款
				</div>
			</div>
		</div>

		<uni-popup ref="dialogInput" type="dialog">
			<uni-popup-dialog mode="input" title="添加备注" :value="beizhu" placeholder="商家可见,最多20个字" @confirm="confirm">
			</uni-popup-dialog>
		</uni-popup>
	</div>
</template>

<script>
	const app = getApp();
	export default {
		data() {
			return {
				price: "", // 输入的金额
				toPrice: null,
				businessId: null,
				beizhu: null,
				vipRadio: false,
				shopRadio: false,
				shareRadio: false,
				memberPrice: 0,
				shopPrice: 0,
				sharePrice: 0,
				isLogin: false,
				businessInfo: null,
				userInfo: null,
				picServiceUrl: app.globalData.picServiceUrl,
				isVip: false,
				userKey: null,
				isBusInfo: false,
				isRepet: true,
				isGoInfo: true, //是否跳转基础信息填写
				rateNum: null,
				myBusId: null
			};
		},
		onLoad(ops) {
			/* this.userInfo = uniCloud.getCurrentUserInfo()
			console.log('当前用户：' + JSON.stringify(this.userInfo));
			if (this.userInfo.uid == null) {
				// 未登录
				uni.navigateTo({
					url: '"/uni_modules/uni-id-pages/pages/userinfo/userinfo"'
				})
			} */
			if (ops && ops.id) {
				this.businessId = ops.id;
				this.isGoInfo = false;
			} else {
				let info;
				//#ifdef  MP-WEIXIN
				info = decodeURIComponent(ops.q);
				// #endif

				//#ifdef  MP-ALIPAY
				info = app.globalData.qrCode;
				// #endif
				if (info) {
					// this.businessId = info.split('id=')[1];
					let pam = info.split('id=')[1];
					let arr = pam.split('_')
					this.businessId = arr[0]
					if (arr.length == 3) {
						this.rateNum = arr[1]
						this.myBusId = arr[2]
					}
				}
			}

		},
		onShow() {
			this.getBusiness();
			this.loginInit();
		},
		methods: {
			/* getUser() {
				// 用户表:zhy_user_info
				var that = this;
				// 获取openid
				let openid = null
				let user = uniCloud.getCurrentUserInfo();
				console.log('22320000000000000');
				console.log(JSON.stringify(user));
				if (user == null || user.length == 0) {
					console.log('33333');
					// 获取openid
					uni.login({
						provider: 'weixin',
						success: function(loginRes) {
							//loginRes中有code，拿着code再请求自己服务器以获取openid
							console.log('11111111111');
							console.log(loginRes.authResult);
							that.isLogin = true
						}
					});
				}
				 const db = uniCloud.database();
				const dbCollectionName = 'zhy_business_info';
				let business = null;
				db.collection(dbCollectionName).where({
					offlineBusinessId: this.businessId
				}).get().then((res) => {
					// res 为数据库查询结果
					let resData = res.result.data[0]
					that.businessInfo = resData
				}).catch((err) => {
					// err.message 错误信息
					// err.code 错误码
				}) 
				 var that = this;
				uni.request({
					url: app.globalData.serviceUrl + '/UserMiniProgramController/getUserInfo',
					data: {
						key: this.userKey
					},
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},

					success(res) {
						let data = res.data.data;
						if (res.data.state == 1) {
							that.userInfo = data;
							that.isLogin = true;
							if (data.isUserMember) {
								that.isVip = true
							} else {
								that.isVip = false
							}
						} else if (res.data.state == 2) {
							that.isLogin = false
						}
					}
				}); 
			},
			 */
			// 获取商户信息:zhy_business_info表
			getBusiness() {
				var that = this;
				console.log('param:' + this.businessId);
				const db = uniCloud.database();
				const dbCollectionName = 'zhy_business_info';
				let business = null;
				db.collection(dbCollectionName).where({
					offlineBusinessId: this.businessId
				}).get().then((res) => {
					// res 为数据库查询结果
					let resData = res.result.data[0]
					that.businessInfo = resData
				}).catch((err) => {
					// err.message 错误信息
					// err.code 错误码
				})

				/*
				var that = this;
				 uni.request({
					url: app.globalData.serviceUrl + '/UserMiniProgramController/getOfflineBusinessInfoById',
					data: {
						offlineBusinessId: this.businessId
					},
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					success(res) {

						if (res.data.state == 1 && res.data.data.businessWechatMchid) {
							that.isBusInfo = true;
							that.businessInfo = res.data.data;
						} else {
							that.isBusInfo = false;
							if (that.isGoInfo) {
								uni.navigateTo({
									url: "/pages/newMy/generateCode/generateCode?id=" + this
										.businessId + '&rate=' + this.rateNum + '&sharid=' + this.myBusId
								})
							}
						}

					}
				}); */
			},
			zhifu() {
				let that = this;
				if (!this.price) {
					uni.showToast({
						title: '请输入金额',
						icon: "none"
					})
					return;
				}
				if (this.isRepet) {
					this.isRepet = false;
					setTimeout(() => {
						this.isRepet = true;
					}, 1500)
					uni.request({
						url: app.globalData.serviceUrl +
							'/UserMiniProgramController/doOfflineBusinessAggregatePay',
						data: {
							key: this.userKey,
							offline_business_id: this.businessId,
							user_pay_price: this.price * 100,
							use_user_cashcoupon: this.shopRadio ? 1 : 0,
							refund_user_cashcoupon: this.vipRadio ? 1 : 0,
							use_helper_user_cashcoupon: this.shareRadio ? 1 : 0,
							remark: this.beizhu
						},
						method: 'POST',
						header: {
							'content-type': 'application/x-www-form-urlencoded'
						},
						success: res => {
							var data = res.data;
							if (data.state == 1) {
								that.$payment(data.data.PaymentData, (res) => {
									// #ifdef MP-WEIXIN
									uni.navigateTo({
										url: "/pages/qrCode/success/success?key=" + this
											.userKey
									})
									// #endif

								}, (err) => {

								});
							} else {
								uni.showToast({
									title: res.data.notice,
									icon: "none"
								})
							}
						}
					});
				}
			},
			kwbykey(key) {
				if (key == "del") {
					this.price = this.price.substring(0, this.price.length - 1);
				} else {
					console.log(this.price.indexOf("."))
					if (key == "." && this.price.indexOf(".") != -1) {
						return;
					}
					if (
						this.price.indexOf(".") != -1 &&
						this.price.split(".")[1].length == 1
					) {
						return;
					}
					if (
						this.price.substring(0, 1) == "0" &&
						this.price.length == 1 &&
						key !== "."
					) {
						return;
					}
					this.price += key;
				}
				if (this.price && this.price != '.') {
					//      isUserMember			-	是否是会员（是否过期）
					// 			userMember			-	用户会员对象
					// 			userCashCouponList		-	用户优惠券列表
					// 			userCashCouponUsable		-	用户所有可用优惠券的可使用额度总额
					// 			userCashCouponSurchargeRatio;	-	用户红包附加费比率
					let pri = parseFloat(this.price);
					this.memberPrice = (pri * this.businessInfo.userCashCouponSurchargeRatio / 100).toFixed(2);

					//如果最大可使用额度小于会员可使用红包额度。则可抵扣额度等于会员的红包额度
					let max = (pri - (pri * this.businessInfo.memberDiscount)).toFixed(2);

					//共享红包只能使用一半
					let max2 = ((pri - (pri * this.businessInfo.memberDiscount)) / 2).toFixed(2);


					let userPrice = this.userInfo.userCashCouponUsable / 100; //用户红包额度
					let shareCount = this.userInfo.userCashCouponHelperUseable / 100; //用户共享红包额度
					if (this.userInfo.isUserMember && userPrice < max) {
						this.shopPrice = userPrice;
					} else {
						this.shopPrice = max;
					}
					if (shareCount < max2) {
						this.sharePrice = shareCount
					} else {
						this.sharePrice = max2
					}
				} else {
					this.memberPrice = 0;
					this.shopPrice = 0;
					this.sharePrice = 0;
				}
				this.countPrice();

			},
			countPrice() {
				let pri = parseFloat(this.price);
				if (pri) {
					if (this.vipRadio) {
						pri = pri + parseFloat(this.memberPrice);
					}
					if (this.shopRadio) {
						pri = pri - parseFloat(this.shopPrice);
					}
					if (this.shareRadio) {
						pri = pri - parseFloat(this.sharePrice);
					}
					this.toPrice = parseFloat(pri).toFixed(2);
				} else {
					this.toPrice = 0;
				}
			},
			openDialogInput() {
				this.$refs.dialogInput.open()
			},
			confirm(e) {
				this.beizhu = e;
			},
			vipChange() {
				if (!this.isLogin) {
					uni.navigateTo({
						url: '../login/index'
					});
				}
				this.vipRadio = !this.vipRadio;
				if (this.isVip) {
					if (this.vipRadio) {
						this.shopRadio = false;
					}
				} else {
					if (this.vipRadio == false) {
						this.shopRadio = false;
					}
				}
				if (this.vipRadio) {
					this.shareRadio = false;
				}
				this.countPrice();
			},
			shopChange() {
				if (this.isVip) {
					if (!this.shopRadio) {
						this.vipRadio = false;
					}
					this.shopRadio = !this.shopRadio;
				} else {
					if (!this.vipRadio) {
						return uni.showToast({
							title: "请先开通“再花卡”",
							icon: "none"
						})
					}
					this.shopRadio = !this.shopRadio;
				}
				if (this.shopRadio) {
					this.shareRadio = false;
				}
				this.countPrice();
			},
			shareChange() {
				this.shareRadio = !this.shareRadio;
				if (this.shareRadio) {
					this.shopRadio = false;
					this.vipRadio = false;
				}
				this.countPrice();
			},
			loginInit() {
				uni.login({
					success: (res) => {
						console.log(res); // 发送 res.code 到后台换取 openId, sessionKey, unionId
						const userCode = res.code
						//#ifdef  MP-WEIXIN
						this.weixinLogin(userCode);
						// #endif


						//#ifdef  MP-ALIPAY
						this.zhifubaoLogin(res);
						// #endif

					}
				});
			},
			zhifubaoLogin(res) {
				uni.request({
					url: app.globalData.serviceUrl + '/UserAliMiniProgramController/aliLogin',
					data: {
						appAuthCode: res.authCode
					},
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					success: (res) => {
						if (res.data.state == 1) {
							this.userKey = res.data.data;
							this.getUser();
						} else {
							uni.showToast({
								title: res.data.notice,
								icon: "none",
								duration: 2000
							});
						}

					},

				});
			},
			weixinLogin(code) {
				let openid = null
				// 获取openid等数据
				uniCloud.callFunction({
					name: 'zhy-mp-weixin',
					data: {
						code: code,
						type: 1
					},
					success: (res) => {
						this.userKey = res.result
						uni.setStorageSync('userKey', this.userKey);
					},
					fail: (res) => {
						console.log('云函数调用失败' + res)
					}
				})
				/* uni.request({
					url: app.globalData.serviceUrl + '/loge',
					data: {
						code: res.code
					},
					header: {
						'content-type': 'application/x-www-form-urlencoded;charset=utf-8'
					},

					success: (res) => {
						if (res.data.state == 1) {
							this.userKey = res.data.notice;
							this.getUser();
						} else {
							uni.showToast({
								title: res.data.notice,
								icon: "none",
								duration: 2000
							});
						}

					},

				}); */
			},
			goAgeement() {
				uni.navigateTo({
					url: "../agreement/index?name=再花卡服务协议.txt"
				})
			}
		},

	};
</script>


<style scoped lang="scss">
	.main-page {
		background: rgba(242, 243, 248, 1);
		min-height: 100vh;
	}

	.zan-wei {
		height: 300px;
	}

	.my-card {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 15px 10px;
		background: #EBEEF5;
		border-radius: 10px;
		box-shadow: 0 10px 10px -10px #e2e2e2;
		margin-top: 10px;

		.title {
			.img {
				width: 20px;
				height: 20px;
				position: relative;
				top: 3px;
			}
		}

		.left {
			flex: 1 1 0;

			.content {
				margin-top: 10px;
				font-size: 12px;
			}

			.content1 {
				font-size: 12px;

				span {
					text-decoration: underline;
				}
			}

			.content2 {
				span {
					display: inline-block;
					font-size: 12px;
					border-top: 1px solid #999;
					margin-top: 5px;
					padding-top: 5px;
				}
			}
		}

		.price-center {
			width: 70px;
		}

		.radio-pic {
			width: 20px;
			height: 20px;
		}
	}

	.btn-kw {
		position: fixed;
		bottom: 0;
		width: 100%;
		color: #333;

		.tipsHide {
			height: 0;
		}

		.tips {
			text-align: right;
			line-height: 50px;
			height: 50px;
			padding: 0 15px;
			background: #eee;
			font-size: 18px;
			color: #111111;
			transition: all 0.5s ease-out;

			.tip {
				font-size: 12px;
			}

			.price {
				font-weight: bold;
			}
		}

	}

	.kw-row {
		display: flex;

		div {
			flex: 1 1 0;
			width: 25%;
			line-height: 60px;
			height: 60px;
			font-size: 24px;
			text-align: center;
			border-top: 1px solid #e2e2e2;
			border-right: 1px solid #e2e2e2;
			background: #fff;

			&:active {
				background-color: #e2e2e2;
			}
		}

		.img-del {
			height: 35px;
			width: 35px;
			margin-top: 12px;
		}
	}

	.kw-xia {
		display: flex;
	}

	.kw-left {
		width: 75%;
	}

	.c-bg {
		width: 25%;
		background-color: #439057;
		color: #fff;
		font-size: 22px !important;
		line-height: 25px !important;
		padding: 65px 24px;
		border: none !important;
		box-sizing: border-box;

		&:active {
			background-color: #e2e2e2;
		}
	}

	.head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 15px;
		font-size: 20px;

		.content {
			font-size: 14px;
			color: #999;
		}

		.head-img {
			background: #439057;
			color: #fff;
			border-radius: 50%;
			line-height: 40px;
			width: 40px;
			height: 40px;
			padding: 5px;
			text-align: center;
			object-fit: cover;
		}
	}

	@keyframes cursor-blinks {
		0% {
			opacity: 1;
			display: block;
		}

		50% {
			opacity: 0;
			display: none;
		}

		100% {
			opacity: 1;
			display: block;
		}
	}

	.price-count {
		margin: 15px;
		padding: 15px 15px 30px 15px;
		background: #fff;
		border-radius: 10px;

		.price-info {
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1px solid #E2E2E2;

			.line {
				animation: cursor-blinks 1.5s infinite steps(1, start);
				width: 1px;
				height: 28px;
				background: #439057;
			}

			.title {
				flex: 0 0 50px;
				font-size: 18px;
			}

			.danwei {
				color: #999;
				flex: 0 0 20px;
				text-align: right;
			}

			.price {
				text-align: right;
				font-size: 28px;
				flex: 1 1 0;
				line-height: 50px;
				height: 50px;
				padding: 0 5px;
			}
		}

		.beizu {
			padding: 15px 0;
			font-size: 14px;
			color: #333;
		}
	}
</style>